<template>
  <!-- 购物车底部的汇总工具栏 -->
  <div class="bottom-bar">
    <div class="chek-content">
      <!-- 使用小按钮 -->
      <check-button class="check-button" :is-checked="isSelectAll" />
      <span @click="checkClick">全选</span>
     
    </div>
    <div class="keyClick" v-show="cartbottombarJudge">
       <span @click="keyClick" >删除所选</span>
    </div>
    <div class="price" v-show="!cartbottombarJudge">合计:<span>{{ totalPrice }}</span></div>

    <div class="calculate" @click="calcClick" v-show="!cartbottombarJudge">去计算 ({{ checkLength }})</div>
  </div>
</template>

<script>
// 导入按钮组件
import CheckButton from "components/cortent/checkButton/CheckButton";

// 导入Vuex的mapGetters辅助函数  mapGetters辅助函数仅仅是将store(Vuex实例的对象)中的个getter(计算属性)映射到局部计算属性
import { mapGetters } from "vuex";
export default {
  name: "CartBottomBar",
  props:{
    cartbottombarJudge:{
      type:Boolean,
      define(){
        return false
      }
    }
  }
  ,
  components: {
    CheckButton,
  },
  data() {
    return {
      // 加入购物车商品的数量
      length:null,
      // 被选中商品的数量
      CountLength:0,
    }
  },
  // 计算属性 用来监控自己定义的变量(响应式)
  computed: {
    ...mapGetters(["cartList", "cartLength"]),
    // 价格合计
    totalPrice() {
      //  filter 筛选数组 它直接返回一个数组 item 当前项  index 当前项的索引
      return (
        "￥" +
        this.cartList
          //  找出选中的商品
          .filter((item) => item.checked)
          // reduce 函数对数组中所有的内容进行汇总(累加)
          // preValue 初始值(或者上一次回调函数的返回值),item当前元素值
          .reduce((preValue, item) => {
            // 获取被选中商品的数量
               this.CountLength++

            // 总计:商品的价格 * 件数
            return preValue + item.price * item.count;
          }, 0) //定义初始值为0
          .toFixed(2) //保留俩位小数
      );
    },
    // 总的商品数量
    checkLength() {
      return (
        this.cartList
          //  找出选中的商品
          .filter((item) => item.checked)
          // 计算商品数量
          .reduce((preValue, item) => {
            return preValue + item.count;
          }, 0)
      );
    },
    // 判断是否要全选
    isSelectAll() {
      //方法一: 目的:查找是否有商品没被选中,如果有length拿到个数就是>0,取反就是false,否则true
      // 没有数据取消全选
      // if(this.cartList.length === 0) return false;
      //  return !this.cartList  //对个数进行取反  !0 true 其他的数字都是false
      //   //  filter 返回的是数组  length 拿到个数
      //    //  找出没有选中的商品
      //   .filter(item => !item.checked).length

      //  方法二:  find()该方法主要应用于查找第一个符合条件的数组元素。返回的是满足条件的元素
      // 没有数据取消全选
      if (this.cartList.length === 0) return false;
      //  找出没有选中的商品  因为没有选中的商品的checked属性为false  先取反为true才能返回,
      // 返回之后还要取反把checked属性又变为false,取消全选按钮的选中状态
      return !this.cartList.find((item) => !item.checked);
    },
  },
  methods: {
    // 全选按钮
    checkClick() {
      // // 1.如果原来都是选中的,点击一次,全部不选中
      // if (this.isSelectAll) {
      //   this.cartList.forEach(item => item.checked= false);
      // } else {
      //   // 2.如果原来都是不选中(某些不选中),点击一次,全部选中
      //   this.cartList.forEach(item => item.checked = true);
      // }

      // 简化
      this.isSelectAll
        ? this.cartList.forEach((item) => (item.checked = false))
        : this.cartList.forEach((item) => (item.checked = true));
    },
    // 删除按钮
    keyClick() {
      // length  在data里面定义的才是响应式的
      this.length = this.cartList.length
      // 1.获取要删除的数据/删除数据 some
     for(let i = 0; i < this.length;i++) {
      //  some方法 查找满足条件的元素,返回的是布尔值,如果找到第一个满足条件的元素, 则终止循环, 不在继续查找
        this.cartList.some((item, index) => {
          // 找出被选中的商品
          if (item.checked) {
            // splice(从哪里开始, 要删除的个数, 要添加的内容)
            this.cartList.splice(index, 1);
          }
        })
      }
    },
    calcClick(){
      if(this.CountLength === 0){
        // 使用this.$toast(自定义的弹窗插件) show() 函数 传入要显示的文字和时间
        this.$toast.show('请选择要购买的商品');
        // console.log(11);
      }
    }
    
  },
};
</script>

<style  scoped>
.bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  height: 40px;
  z-index: 9;
  display: flex;
  /*垂直居中 */
  align-items: center;

  background-color: #fff;
 
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
  font-size: 14px;
}

.chek-content {
  display: flex;
  /*垂直居中 */
  align-items: center;
  height: 49px;
  margin-left: 10px;
  /* width: 60px; */
}
.chek-content span {
  margin-left: 5px;
}
.price {
  margin-left: 10px;
  flex: 1;
}
.calculate {
  width: 90px;
  height: 100%;
  background: red;
  line-height: 44px;
  text-align: center;
  color: #fff;
}
.keyClick{
 position: absolute;
 right: 22px;
  border: 1px solid #333;
  padding: 3px 15px;
  border-radius: 42px;
}
.price span{
  font-weight: 700;
  color: #333;
}
</style>